/**
 * 地图
 * MapEcharts (reactCharts)
 * @author sh
 * @date  2020-12-22
 */
import { Spin } from 'antd';
import ReactEcharts from 'echarts-for-react';
import PropTypes from 'prop-types';
import React from 'react';

import mapArr from './coordinate';

import 'echarts/map/js/china.js';
import Color from '../../../css/colors';
// eslint-disable-next-line import/no-cycle
import { NoDataC } from '@/src/components';

class MapEcharts extends React.Component {
  // eslint-disable-next-line react/static-property-placement
  static defaultProps = {
    dataList: undefined,
    height: '100%', // 图形高度默认为父节点的100%
    width: '100%', // 图形宽度默认为父节点的100%
    click: () => {}, // 默认事件
    defaultName: undefined, // 默认选中的省份
    toolTipInfo: () => {}, // 悬浮展示的值 必须返回的是模板字符串 echarts不认识jsx
  };

  click = (e) => {
    // 抛出点击事件
    // eslint-disable-next-line react/destructuring-assignment
    this.props.click(e);
    const geos = [
      {
        zlevel: 1, // geo显示级别，默认是0
        map: 'china', // 地图名
        geoIndex: 0,
        selectedMode: 'single', // 选中模式 （'single'表示单选，'multiple'表示多选）
        regions: [
          // 隐藏右下角框框
          {
            name: '南海诸岛',
            itemStyle: {
              normal: {
                opacity: 0, // 为 0 时不绘制该图形
              },
            },
            label: {
              show: false, // 隐藏文字
            },
          },
          {
            name: e.name,
            itemStyle: { areaColor: '#98B4FF' }, // 点击区域变色
          },
        ],
        itemStyle: {
          // 定义样式
          normal: {
            // 普通状态下的样式
            areaColor: '#F2F8FF', // 普通状态下背景颜色
            borderWidth: 1, // 设置外层边框
            borderColor: '#5B89FE',
          },
          emphasis: {
            // 高亮状态下的样式
            show: true,
            areaColor: '#98B4FF',
          },
        },
      },
    ];
    this.echarts_instance.setOption({ geo: geos });
  };

  // 转换数据格式
  convertData = () => {
    const { dataList } = this.props;
    const res = [];
    const data = mapArr.geoCoordMap;
    if (dataList && dataList.length) {
      // eslint-disable-next-line no-plusplus
      for (let i = 0; i < dataList.length; i++) {
        const geoCoord = data[dataList[i].name];
        if (geoCoord) {
          res.push({
            name: dataList[i].name,
            range: dataList[i].range,
            totalProduct: dataList[i].totalProduct,
            totalOrgan: dataList[i].totalOrgan,
            totalScale: dataList[i].totalScale,
            value: geoCoord.concat(dataList[i]?.size), // 散点大小取size！！！！！
          });
        }
      }
    }
    return res;
  };

  initEchartsEvent = (e) => {
    if (!e) return;
    this.echarts_instance = e.getEchartsInstance(); // echarts实例
  };

  showEcharts = () => {
    const { width, height, dataList, toolTipFormat, defaultName, toolTipInfo } = this.props;
    const initStatus = !!dataList;

    const option = {
      tooltip: {
        trigger: 'item',
      },
      geo: [
        {
          zlevel: 0, // geo显示级别，默认是0
          map: 'china', // 地图名
          geoIndex: 0,
          selectedMode: 'single', // 选中模式 （'single'表示单选，'multiple'表示多选）
          regions: [
            // 隐藏右下角框框
            {
              name: '南海诸岛',
              itemStyle: {
                normal: {
                  opacity: 0, // 为 0 时不绘制该图形
                },
              },
              label: {
                show: false, // 隐藏文字
              },
            },
            {
              name: defaultName, // 默认选中的省份
              itemStyle: { areaColor: '#4376FF' },
            },
          ],
          itemStyle: {
            // 定义样式
            normal: {
              // 普通状态下的样式
              areaColor: '#F2F8FF', // 普通状态下背景颜色
              borderWidth: 1, // 设置外层边框
              borderColor: '#5B89FE',
            },
            emphasis: {
              // 高亮状态下的样式
              show: false,
              areaColor: '#98B4FF', // 悬浮颜色
            },
          },
        },
      ],
      series: [
        {
          name: '中国地图',
          type: 'map',
          selectedMode: 'multiple',
          mapType: 'china', // 自定义扩展图表类型
          aspectScale: 0.75,
          geoIndex: 0,
          tooltip: {
            trigger: 'item',
            formatter: (params) => {
              if (toolTipInfo) {
                return toolTipInfo(params.data);
              }
              return null;
            },
          },
          itemStyle: {
            // normal: {
            //   // 普通状态下的样式
            //   areaColor: '#F2F8FF', // 普通状态下背景颜色
            //   borderWidth: 1, // 设置外层边框
            //   borderColor: '#BAD2FF',
            // },
            areaColor: Color.echartItems.area,
            color: Color.echartItems.area,
          },
          label: {
            show: false,
          },
          data: dataList,
        },
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          tooltip: {
            trigger: 'item',
            formatter:
              toolTipFormat ||
              ((params) =>
                `<div style="font-size:16px">${params.name}\xa0\xa0\xa0TOP${params.data.range}</div>` +
                `<div style='font-size:10px;margin-top:3px';height:10px>累计机构数：${params.data.totalOrgan}</div>`),
            padding: [10, 15, 10, 15],
            confine: true,
          },
          data: this.convertData(),
          symbolSize: (val) => {
            const { dataList: data } = this.props;
            if (data.length <= 5) {
              return val[2] * 4;
            }
            if (data.length > 5 && data.length <= 10) {
              return val[2] * 2;
            }
            if (data.length > 10 && data.length <= 15) {
              return val[2] * 1;
            }
            // 设置散点大小
            return val[2] / 2;
          },
          geoIndex: 0, // 与map公用geo组件
          encode: {
            value: 2,
          },
          showEffectOn: 'render', // 绘制完成后显示特效
          rippleEffect: {
            // 涟漪特效相关配置
            brushType: 'stroke', // 波纹的绘制方式
          },
          hoverAnimation: true, // hover特效
          label: {
            show: false,
            position: 'right',
          },
          itemStyle: {
            color: '#FFC900',
            shadowBlur: 20,
            shadowColor: '#FFC900',
            opacity: 1,
          },
          zlevel: 2,
        },
      ],
    };

    return (
      <Spin spinning={!initStatus} tip='加载中...'>
        {/* eslint-disable-next-line no-nested-ternary */}
        {initStatus ? (
          dataList.length ? (
            <ReactEcharts
              option={option}
              style={{ height, width }}
              ref={this.initEchartsEvent}
              onEvents={{
                click: this.click,
              }}
            />
          ) : (
            <NoDataC />
          )
        ) : (
          <div style={{ height, width }} />
        )}
      </Spin>
    );
  };

  render() {
    return <div>{this.showEcharts()}</div>;
  }
}

MapEcharts.propsTypes = {
  // eslint-disable-next-line react/forbid-prop-types
  dataList: PropTypes.array, // 数据（[{name:'xx省',value:'圆点的大小取值',range:'排名',num:累计机构数，size: 散点大小},...]）
  width: PropTypes.string, // 图形宽度
  height: PropTypes.string, // 图形高度
  click: PropTypes.func, // 点击地图，抛出事件
  defaultName: PropTypes.string, // 默认高亮地区名
  toolTipInfo: PropTypes.func, // 悬浮展示的值 必须返回的是模板字符串 echarts不认识jsx
};
export default MapEcharts;
